<template>
  <div v-show="visible" class="xz-message" :class="[type === 'normal' ? 'success' : type === 'warning' ? 'warning' : '']">
    <span>{{type === 'normal' ? '身份核验通过' : type === 'warning' ? msg : ''}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'xzMessage',
  props: {
    type: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
.xz-message {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  &.success {
    background: #2AC7AF;
    color: #FFFFFF;
    span {
      position: relative;
      padding-left: 27px;
      display: inline-block;
      height: 100%;
      overflow: hidden;
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: "";
        display: inline-block;
        width: 19px;
        height: 19px;
        background: url("../../assets/images/icon-success.png") no-repeat 50%;
        background-size: 19px 19px;
      }
    }
  }
  &.warning {
    background: #F1A748;
    color: #FFFFFF;
    span {
      position: relative;
      padding-left: 27px;
      display: inline-block;
      height: 100%;
      overflow: hidden;
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: "";
        display: inline-block;
        width: 19px;
        height: 19px;
        background: url("../../assets/images/icon-gantanhao.png") no-repeat 50%;
        background-size: 19px 19px;
      }
    }
  }
  &.error {
    background: #FF7D4F;
    color: #FFFFFF;
    span {
      position: relative;
      padding-left: 27px;
      display: inline-block;
      height: 100%;
      overflow: hidden;
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: "";
        display: inline-block;
        width: 19px;
        height: 19px;
        background: url("../../assets/images/icon-gantanhao.png") no-repeat 50%;
        background-size: 19px 19px;
      }
    }
  }
}
</style>
